<template>
  <!-- 如果当前组件被使用的时候,绑定原生事件,需要有一个根元素,因为绑定给组件的时候都是绑定给组件内模板的最外层元素 -->
  <div>
    <h4>Child</h4>
    <div>我是Child</div>

    <!-- 以下是vue2中的自定义事件触发方式,仍然可以使用 -->
    <button @click="$emit('xxx')">vue2方式触发自定义事件</button>
    <button @click="emits('xxx')">vue3方式触发自定义事件xxx</button>
    <button @click="emits('yyy' , 10)">vue3方式触发自定义事件yyy</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Child",
});
</script>

<script setup lang="ts">
/* defineProps defineEmits等接收的方法 都是默认引入的 我们可以不进行接收直接使用*/
import {defineEmits} from "vue"

interface emitsType{
  /* 
    接受自定义事件的 类型定义,必须接受一个event的参数,值是事件名,后边的参数全部都是向自定义事件传递的值
    (event:"事件名",xxx:类型)
  */
  (event: "xxx"):void;
  (event: "yyy" , count:number):void;
}
const emits = defineEmits<emitsType>()
</script>
